<template>
    <scrolla :data="tableList" :class-option="optionSingleHeight" class="seamless-warp">
      <span slot="left-switch" class="left-arrow"></span>
        <span slot="right-switch" class="right-arrow"></span>
        <!-- <ul class="item">
            <li v-for="(item,index) in listData" :key="index">
                <span class="title" v-text="item.title"></span><span class="date" v-text="item.date"></span>
            </li>
        </ul> -->
        <div class="table1">
          <div class="item1" id="auto" v-for="item in tableList" :key="item.incidentName">
      <div class="td">
        <el-tooltip class="item" effect="dark" :content="item.incidentName" placement="top-start">
          <span>{{item.incidentName}}</span>
        </el-tooltip>
      </div>
      <div class="td">
        {{item.incidentAddress}}
      </div>
      <div class="td">
          <span>{{item.value}}</span>
      </div>
      <div class="td" style="color:red;">
        {{item.incidentType}}
      </div>
      <div class="td">
        {{item.incidentTime}}
      </div>
    </div>
        </div>
    </scrolla>
</template>
<style lang="scss">
@mixin titleTab {
      min-height: 30px;
      display: flex;
      align-items: center;
      padding-left: 5px;
      margin-top: 15px;
      // color: white;
      // border: 1px solid skyblue;
  }
    .seamless-warp {
        height: 229px;
        overflow: hidden;
        .left-arrow, .right-arrow {
            position: relative;
            display: inline-block;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #00a0e9;
            cursor: pointer;
            &:hover {
                background-color: #0f39fa;
            }
            &::before {
                position: absolute;
                content: '';
                width: 16px;
                height: 16px;
                top: 12px;
                left: 15px;
                border: 2px solid #fff;
            }
        }
        .left-arrow::before {
            border-right: 0;
            border-bottom: 0;
            transform: rotate(-45deg);
        }
        .right-arrow::before {
            border-left: 0;
            border-top: 0;
            left: 9px;
            transform: rotate(-45deg);
        }
    }
    .table1 {
      width: 100%;
      max-height: 340px;
      overflow: auto;
      // border: 1px solid red;
    }
    .table1 .item1 {
      display: flex;
      margin-top: 10px;
      min-height: 15px;
      align-items: center;
      // border: 1px solid rgb(192,192,192);
      background: rgba(63, 124, 148,0.3);
    }
    .table1 .header {
      display: flex;
      color: #72e3f1;
      background: rgba(63, 124, 148,0.5);
      @include titleTab;
    }
    .table1 .item1 .td {
      text-align: center;
      display: inline-block;
      flex: 1;
      color: #72e3f1;
    }
    .table1 .header .td {
      text-align: center;
      flex: 1;
      position: relative;
    }
</style>
<script>
import scrolla from "vue-seamless-scroll"
export default {
  data() {
    return {
      listData: [
        {
          "title": "无缝滚动第一行无缝滚动第一行",
          "date": "2017-12-16"
        }, {
          "title": "无缝滚动第二行无缝滚动第二行",
          "date": "2017-12-16"
        }, {
          "title": "无缝滚动第三行无缝滚动第三行",
          "date": "2017-12-16"
        }, {
          "title": "无缝滚动第四行无缝滚动第四行",
          "date": "2017-12-16"
        }, {
          "title": "无缝滚动第五行无缝滚动第五行",
          "date": "2017-12-16"
        }, {
          "title": "无缝滚动第六行无缝滚动第六行",
          "date": "2017-12-16"
        }, {
          "title": "无缝滚动第七行无缝滚动第七行",
          "date": "2017-12-16"
        }, {
          "title": "无缝滚动第八行无缝滚动第八行",
          "date": "2017-12-16"
        }, {
          "title": "无缝滚动第九行无缝滚动第九行",
          "date": "2017-12-16"
        }],
      tableList: [
        {
          incidentName: "精神障碍患者张11",
          incidentType: 1, // 1是警告 0是正常
          incidentTime: "2020-02-22 11:15:51",
          incidentAddress: "1层呼梯主机",
          value: "38℃"
        },
        {
          incidentName: "精神障碍患者张322",
          incidentType: 0,
          incidentTime: "2020-02-22 11:25:11",
          incidentAddress: "1层呼梯主机",
          value: "36.5℃"
        },
        {
          incidentName: "精神障碍患者张123",
          incidentType: 1,
          incidentTime: "2020-02-22 12:55:32",
          incidentAddress: "1层呼梯主机",
          value: "37.5℃"
        },{
          incidentName: "精神障碍患者张12",
          incidentType: 0,
          incidentTime: "2020-02-22 15:52:21",
          incidentAddress: "1层呼梯主机",
          value: "36.5℃"
        },
        {
          incidentName: "精神障碍患者张1231",
          incidentType: 1,
          incidentTime: "2020-02-22 11:55:21",
          incidentAddress: "1层呼梯主机",
          value: "37.5℃"
        },
        {
          incidentName: "精神障碍患者张123111",
          incidentType: 1,
          incidentTime: "2020-02-22 17:55:21",
          incidentAddress: "1层呼梯主机",
          value: "37.5℃"
        }
      ]
    }
  },
  computed: {
    optionSingleHeight() {
      return {
        direction: 2,limitMoveNum: 2,navigation: true,autoplay: false
      }
    }
  },
  components: {
    scrolla
  }
}
</script>
